'use strict';

import React from "react";
import {
    Image,
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
    Animated,
    InteractionManager,
    ActivityIndicator
} from "react-native";
import ParallaxScrollView from "react-native-parallax-scroll-view";
import FarmerStoryView from "../Components/FarmerStoryView";
import IntroduceView from "../Components/IntroduceView";
import VillageHeadSay from "../Components/VillageHeadSay";
import InfoTypeView from "../Components/InfoTypeView";
import CommentList from "../Components/CommentList";
import MoreDetails from "./MoreDetails";
import ImageViewer from "./ImageViewer";
import Foreground from "../Components/Foreground";
import FixedHeader from "../Components/FixedHeader";
import PlayDetailsPage from "./PlayDetailsPage";
import SpecialtyDetailsPage from "./SpecialtyDetailsPage";
import EventDetailsPage from "./EventDetailsPage";
import StayDetailsPage from "./StayDetailsPage";
import FarmHouseSell from "./FarmHouseSell";
import ViewPager from "react-native-viewpager";
import LoadingView from "../Components/LoadingView";
import VillageHeadSayPage from "./VillageHeadSayPage";
import RuralActivity from "../Components/RuralActivity";
import FarmerStoryPage from "./FarmerStoryPage";
import BottomShareView from "../Components/BottomShareView";
import Global from "../Commom/GlobalConst";
import SomethingItemView from "../Components/SomethingItemView";
import BottomCountryBtn from "../Components/BottomCountryBtn";
import RuralLibraryAPIService from "../Commom/RuralLibraryAPIService";
import WithTogether from '../Pages/WithTogetherDetails';
import AllRuralActivityPage from '../Pages/AllRuralActivityPage';
const {width, height} = Global.Const.size;
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    borderStyles: {
        marginTop: 15,
        backgroundColor: 'white',
        borderBottomWidth: 1,
        borderTopWidth: 1,
        borderColor: "#F1F1F1",
    },
    somethingStyle: {
        flexDirection: 'row',
        padding: 15,
        paddingBottom: 5,
        alignItems: 'center',
    },
    btnBox: {
        marginRight: 5,
        borderRadius: 5,
        backgroundColor: '#38D68B',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 5,
    },
    button: {
        color: 'white',
        fontSize: 12,
    },
    toolBar: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingTop: 24,
        zIndex: 9,
    },
    image80: {
        width: 80,
        height: 80,
        marginRight: 10
    },
    stickyHeaderBox: {
        alignItems: 'center',
        padding: 10,
        flexDirection: 'row',
        paddingBottom: 0,
        paddingTop: 5,
        borderTopWidth: 1,
        borderColor: Global.Const.transparent,
    },
    collectBox: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 5
    },
    icon20: {
        width: 20,
        height: 20,
        marginRight: 5
    },
    rowPadding: {
        flexDirection: 'row',
        padding: 10,
        paddingLeft: 15,
        paddingRight: 15
    },
    flexCenter: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    someBoxTitle: {
        fontSize: 14,
        color: Global.FontColor.DimGray,
        marginTop: 5,
        width: 80,
        textAlign: 'center'
    },
    playImgBox: {
        height: 120,
        width: width - 40,
        justifyContent: 'flex-end',
    },
    playTitle: {
        color: 'white',
        backgroundColor: 'rgba(0,0,0,0.3)',
        padding: 5,
        fontSize: 15,
    },
    whoBox: {
        color: '#38D68B',
        fontSize: 14,
        width,
        borderBottomWidth: 1,
        borderBottomColor: '#f2f3f5'
    },
    eventTitle: {
        fontSize: 15,
        color: Global.FontColor.DimGray,
    },
    eventSubtitle: {
        fontSize: 13,
        color: Global.FontColor.DarkGray,
        lineHeight: 23,
    }
});

class CountryInfo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            introduce: {},
            eatList: [],
            playList: [],
            hotelList: [],
            commentList: [],
            flag: false,
            dataSource: new ViewPager.DataSource({}),
            event: {},
            is_collect: '0',
            been_to: '0',
            map: [],
            images: [],
            paddingBottom: new Animated.Value(0),
            nearVillageList: [],
            dynamic: {},
            village_chief: {},
            farmer_story: [],
            activity: [],
        };
    }

    componentDidMount() {
        let id = this.props.ID;
        console.log('===', id);
        if (!id) {
            id = 1;
        }
        InteractionManager.runAfterInteractions(() => {
            RuralLibraryAPIService.libraryDetails(Global.Const.token, Global.Const.registeredId, id).then((ret)=> {
                let introduce = {
                    id: ret.rural_id,
                    title: ret.rural_title,
                    subtitle: '',
                    star: ret.star,
                    typeText: ret.type_text,
                    is_collect: ret.is_collect,
                    desc: ret.content,
                    monitoring: ret.monitoring,
                    panorama: ret.panorama,
                    video: ret.video,
                };
                this.setState({
                    flag: true,
                    map: ret.label,
                    dynamic: ret.dynamic,
                    event: ret.event,
                    eatList: ret.eat_list,
                    playList: ret.paly_list,
                    hotelList: ret.hotel_list,
                    dataSource: this.state.dataSource.cloneWithPages(ret.rural_image),
                    images: ret.rural_image,
                    nearVillageList: ret.near_village_list,
                    commentList: ret.comment_list,
                    village_chief: ret.village_chief,
                    farmer_story: ret.farmer_story,
                    activity: ret.activity,
                    been_to: ret.been_to,
                    is_collect: ret.is_collect,
                    introduce,
                });
            }).catch((err)=> {

            });
        });
    }

    refreshComments() {
        let id = this.props.ID;
        if (!id) {
            id = 1;
        }

        RuralLibraryAPIService.libraryDetails(Global.Const.token, Global.Const.registeredId, id).then((ret)=> {
            this.setState({
                commentList: ret.comment_list,
            });
        }).catch((err)=> {

        });
    }

    viewPagerItemClick() {
        this.props.navigator.push({
            name: 'ImageViewer',
            component: ImageViewer,
            passProps: {
                source: this.state.images,
            }
        })
    }

    goToWithTogetherDetailPage(id) {
        this.props.navigator.push({
            name: 'WithTogetherDetail',
            component: WithTogether,
            passProps: {
                ID: id
            }
        });
    }

    _renderStickyHeader() {
        let collectImg = this.state.is_collect == '1' ?
            require('../../Image/collect_icon.png')
            : require('../../Image/un_collect_icon.png');
        console.log('this.state.dynamic.avatar','this.state.dynamic.avatar'+this.state.dynamic.avatar);
        return (
            <View style={{}}>
                <View style={{height: 55, paddingTop: 12, alignItems: 'center', justifyContent: 'center'}}>
                    <Text
                        style={{color: Global.FontColor.DimGray, fontSize: 18}}>{this.state.introduce.title}</Text>
                </View>
                <TouchableOpacity onPress={() => this.goToWithTogetherDetailPage(this.state.dynamic.id)}>
                    <View style={styles.stickyHeaderBox}>
                        <Image style={{width: 28, height: 28, marginLeft: 5, resizeMode: 'contain'}}
                               source={require('../../Image/hanren_icon.png')}>

                        </Image>
                        <View
                            style={{width:1,height:12,backgroundColor:Global.FontColor.LightGrey,marginLeft:10,marginRight:5}}></View>
                        <Image
                            style={{width: 18, height: 18, borderRadius:9, marginRight:5}}
                            source={{uri:this.state.dynamic.avatar}}>

                        </Image>
                        <Text numberOfLines={1}
                              style={styles.container}>{this.state.dynamic.name}:邀您进入：《{this.state.dynamic.content}》</Text>

                    </View>
                </TouchableOpacity>
            </View>
        )
    }

    goToMorePage(page) {
        this.props.navigator.push({
            name: 'MoreDetails',
            component: MoreDetails,
            passProps: {
                initialPage: page,
                id: this.props.ID,
            }
        })
    }

    goToPlayDetailsPage(id) {
        this.props.navigator.push({
            name: 'PlayDetailsPage',
            component: PlayDetailsPage,
            passProps: {
                ID: id,
            }
        });
    }

    goToSell() {
        this.props.navigator.push({
            name: 'FarmHouseSell',
            component: FarmHouseSell,
            passProps: {}
        })
    }

    goToVillagePage(id) {
        this.props.navigator.push({
            name: 'VillageHeadSayPage',
            component: VillageHeadSayPage,
            passProps: {
                id: id,
            }
        })
    }

    goToFarmerPage(id) {
        this.props.navigator.push({
            name: 'FarmerStoryPage',
            component: FarmerStoryPage,
            passProps: {
                id: id,
            }
        })
    }

    goToEventDetails(id) {
        this.props.navigator.push({
            name: 'EventDetailsPage',
            component: EventDetailsPage,
            passProps: {
                ID: id
            }
        });
    }

    goToAllRuralActivityPage(id) {
        this.props.navigator.push({
            name: 'AllRuralActivityPage',
            component: AllRuralActivityPage,
            passProps: {
                ID: id
            }
        });
    }

    _renderViewPager() {
        if(this.state.images.length>1){
            return (
                <ViewPager
                    locked={false}
                    isLoop={true}
                    autoPlay={true}
                    renderPageIndicator={false}
                    renderPage={(page) => {
                        return (
                            <TouchableOpacity onPress={() => this.viewPagerItemClick()}>
                                <Image source={{uri:page}}
                                       style={{
                                           height: 245,
                                           width,
                                       }}
                                />
                            </TouchableOpacity>
                        )
                    }}
                    dataSource={this.state.dataSource}
                />
            )
        }else{
            return (
                   <TouchableOpacity onPress={() => this.viewPagerItemClick()}>
                      <Image source={{uri:this.state.images[0]}}
                             style={{height: 245,width,}}/>
                    </TouchableOpacity>
            )
        }

    }

    _renderShowAllBtn(text, onClick) {
        return (
            <TouchableOpacity onPress={() => onClick()}>
                <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'center',
                    padding: 10,
                    borderColor: '#F2F3F5',
                    borderTopWidth: 1,
                }}>
                    <Text style={{ color: '#38D68B',
                        fontSize: 15}}>
                        {text}
                    </Text>
                    <Image
                        style={{width: 15, height: 15, marginLeft: 5, resizeMode: 'contain',opacity: 0.82,marginTop: 2}}
                        source={require('../../Image/icon_green_arrow.png')}
                    />
                </View>
            </TouchableOpacity>
        )
    }


    render() {
        let navigator = this.props.navigator;
        return (
            <Animated.View style={[styles.container, {paddingBottom: this.state.paddingBottom}]}>
                {
                    this.state.flag && this.state.images.length > 0 ?
                        <ParallaxScrollView
                            showsVerticalScrollIndicator={false}
                            contentBackgroundColor={'white'}
                            backgroundColor={'white'}
                            headerBackgroundColor="#333"
                            stickyHeaderHeight={ 90 }
                            parallaxHeaderHeight={ 365 }
                            backgroundSpeed={10}
                            renderForeground={() => {
                                return (
                                    <Foreground
                                        show720={this.state.introduce.panorama.length>0?true:false}
                                        height={365}
                                        showVideo={this.state.introduce.video.length>0?true:false}
                                        showLive={this.state.introduce.monitoring.length>0?true:false}
                                        Component={InfoTypeView}
                                        renderHeader={() => this._renderViewPager()}
                                        introduce={this.state.introduce}
                                        navigator={this.props.navigator}
                                        size={this.state.dataSource.getPageCount()}
                                        is_collect={this.state.is_collect}
                                        map={this.state.map}
                                        been_to={this.state.been_to}
                                        id={this.props.ID}
                                        type={0}
                                    />
                                )
                            }}
                            renderStickyHeader={() => this._renderStickyHeader()}
                            renderFixedHeader={() => {
                                return (
                                    <FixedHeader flag={true} rightFunc={()=> {
                                        this.shareView && this.shareView.showShareView();
                                    }} navigator={this.props.navigator}/>
                                )
                            }}
                        >
                            <View style={{flex: 1, backgroundColor: '#F5F5F5'}}>
                                <IntroduceView introText={this.state.introduce.desc}/>
                                {this.state.village_chief != null ? <View style={styles.borderStyles}>
                                    <VillageHeadSay
                                        village_chief={this.state.village_chief}/>
                                    {this._renderShowAllBtn('查看详情', ()=>this.goToVillagePage(this.state.village_chief.id))}
                                </View> : null}
                                {this.state.farmer_story != null && this.state.farmer_story.length > 0 ?
                                    <View style={styles.borderStyles}>
                                        <FarmerStoryView
                                            farmer_story={this.state.farmer_story}
                                            onItemClick={(id) => this.goToFarmerPage(id)}/>
                                    </View> : null}
                                {this.state.activity != null && this.state.activity != '' ?
                                    <View style={styles.borderStyles}>
                                        <View style={styles.somethingStyle}>
                                            <Image
                                                style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                                                source={require('../../Image/icon_booking.png')}
                                            />
                                            <Text
                                                style={{color: Global.FontColor.DimGray, fontSize: 16}}>乡村活动</Text>
                                        </View>
                                        <RuralActivity activity={this.state.activity}
                                                       onItemClick={(id) => this.goToEventDetails(id)}/>
                                        {this._renderShowAllBtn('查看全部活动', ()=>this.goToAllRuralActivityPage(this.props.ID))}
                                    </View>
                                    : null}

                                {this.state.eatList != null && this.state.eatList.length > 0 ?
                                    <View style={styles.borderStyles}>
                                        <View style={styles.somethingStyle}>
                                            <Image
                                                style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                                                source={require('../../Image/icon_gray_eat_something.png')}
                                            />
                                            <Text style={{color: Global.FontColor.DimGray, fontSize: 16}}>吃什么</Text>
                                        </View>
                                        <View
                                            style={{ flexDirection: 'row', padding: 10,paddingLeft: 15,paddingRight: 15}}>
                                            { this.state.eatList.map((eat, index) => {
                                                return (
                                                    <SomethingItemView
                                                        key={"eatItem" + index}
                                                        item={eat}
                                                        component={SpecialtyDetailsPage}
                                                        navigator={navigator}
                                                        name={"SpecialtyDetailsPage"}
                                                    />
                                                )
                                            })
                                            }
                                        </View>
                                        {this._renderShowAllBtn("查看全部美食", () => this.goToMorePage(0))}
                                    </View> : null}
                                {this.state.playList != null && this.state.playList.length > 0 ?
                                    <View style={styles.borderStyles}>
                                        <View style={styles.somethingStyle}>
                                            <Image
                                                style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                                                source={require('../../Image/icon_gray_play.png')}
                                            />
                                            <Text style={{color: Global.FontColor.DimGray, fontSize: 16}}>玩什么</Text>
                                        </View>
                                        <View style={{flex: 1, paddingRight: 10, paddingLeft: 10}}>
                                            {this.state.playList.map((item, index) => {
                                                return (
                                                    <TouchableOpacity key={'playSome' + index}
                                                                      onPress={() => this.goToPlayDetailsPage(item.id)}>
                                                        <View style={{padding: 10}}>
                                                            <Image source={{uri:item.images}}
                                                                   style={styles.playImgBox}>
                                                                <Text style={styles.playTitle}>{item.title}</Text>
                                                            </Image>
                                                        </View>
                                                    </TouchableOpacity>
                                                )
                                            })
                                            }
                                        </View>
                                        {this._renderShowAllBtn("查看全部风景", () => this.goToMorePage(2))}
                                    </View> : null}
                                {this.state.hotelList != null && this.state.hotelList.length > 0 ?
                                    <View style={styles.borderStyles}>
                                        <View style={styles.somethingStyle}>
                                            <Image
                                                style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                                                source={require('../../Image/icon_gray_live.png')}
                                            />
                                            <Text style={{color: Global.FontColor.DimGray, fontSize: 16}}>住哪里</Text>
                                        </View>
                                        <View style={styles.rowPadding}>
                                            {
                                                this.state.hotelList.map((live, index) => {
                                                    return (
                                                        <SomethingItemView
                                                            key={"hotelItem" + index}
                                                            item={live}
                                                            component={StayDetailsPage}
                                                            navigator={navigator}
                                                            name={"StayDetailsPage"}
                                                            textColor="red"
                                                        />
                                                    )
                                                })
                                            }
                                        </View>
                                        {this._renderShowAllBtn("查看全部酒店", () => this.goToMorePage(1))}
                                    </View> : null}
                                {this.state.commentList != null && this.state.commentList.length > 0 ?
                                    <View style={styles.borderStyles}>
                                        <View style={styles.somethingStyle}>
                                            <Text numberOfLines={1}
                                                  style={styles.whoBox}>谁来过：
                                                <Text style={{color: Global.FontColor.LightGrey}}>
                                                    {
                                                        this.state.commentList ?
                                                            this.state.commentList.map((item, index) => {
                                                                let name = item.name;
                                                                if (index < this.state.commentList.length - 1) {
                                                                    name += ',';
                                                                }
                                                                return name;
                                                            }) : null
                                                    }
                                                </Text>
                                            </Text>
                                        </View>
                                        <CommentList showTop={true} commentList={this.state.commentList}
                                                     id={this.props.ID} type={0}
                                                     navigator={this.props.navigator}/>
                                    </View> : null}
                                {this.state.nearVillageList != null && this.state.nearVillageList.length > 0 ?
                                    <View style={styles.borderStyles}>
                                        <View style={styles.somethingStyle}>
                                            <Image
                                                style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                                                source={require('../../Image/icon_gray_near.png')}
                                            />
                                            <Text
                                                style={{color: Global.FontColor.DimGray, fontSize: 16}}>附近乡村</Text>
                                        </View>
                                        <View style={styles.rowPadding}>
                                            {
                                                this.state.nearVillageList ? this.state.nearVillageList.map((item, index) => {
                                                    return (
                                                        <SomethingItemView
                                                            key={"villageItem" + index}
                                                            item={item}
                                                            textColor={"red"}
                                                            component={CountryInfo}
                                                            navigator={navigator}
                                                            name={"CountryInfo"}
                                                        />
                                                    )
                                                }) : null
                                            }
                                        </View>
                                    </View> : null}
                            </View>
                        </ParallaxScrollView> :
                        <View style={{flex:1,backgroundColor:'#F5F5F5'}}><View
                            style={{position: 'absolute',top:0,left:0,width:Global.Const.size.width,height:Global.Const.size.height,backgroundColor:null,alignItems:'center',justifyContent:'center'}}>
                            <View
                                style={{backgroundColor:'#333333',borderRadius:5, alignItems: 'center',justifyContent: 'center',width:80,height:80}}>
                                <ActivityIndicator
                                    animating={this.state.animating}
                                    style={{ alignItems: 'center',justifyContent: 'center'}}
                                    size="large"/>
                                <Text style={{color:'white'}}>加载中...</Text>
                            </View>
                        </View>
                        </View>

                }

                <BottomShareView
                    shareTitle={this.state.introduce.title}
                    shareContent={this.state.introduce.desc}
                    shareImageUrl={this.state.images[0]}
                    shareUrl={'http://xc.xiarikui.cn/Api/Index/share'}
                    ref={(ref) => {this.shareView = ref;}
                }
                />
                <BottomCountryBtn
                    navigator={this.props.navigator}
                    id={this.props.ID}
                    type={0}
                    refreshComments={()=>this.refreshComments()}
                />
            </Animated.View>
        );
    }
}

export default CountryInfo;